<template>
  <!-- 顶部导航栏 - 固定在页面顶部 -->
  <header class="header">
    <!-- 导航栏容器 - 限制最大宽度并居中 -->
    <div class="header-container">
      <!-- Logo区域 - 包含小红书Logo -->
      <div class="logo">
        <!-- 小红书Logo图片 - 使用相对路径引用assets中的图片 -->
        <img src="/src/assets/xiaohongshu.png" alt="小红书" class="logo-image" />
      </div>
      
      <!-- 搜索框区域 - 占据中间位置 -->
      <div class="search-container">
        <div class="search-box">
          <!-- 搜索图标 -->
          <img src="/src/assets/icons/search.png" alt="搜索" class="search-icon" />
          <!-- 搜索输入框 - 绑定到searchQuery响应式数据 -->
          <input 
            type="text" 
            placeholder="登录探索更多内容" 
            class="search-input"
            v-model="searchQuery"
          />
        </div>
      </div>
      
      <!-- 右侧操作区域 - 包含按钮和用户头像 -->
      <div class="header-actions">
        <!-- 创作中心按钮 -->
        <button class="action-btn">创作中心</button>
        <!-- 业务合作按钮 -->
        <button class="action-btn">业务合作</button>
        <!-- 用户头像 -->
        <div class="user-avatar">
          <img src="https://ts1.tc.mm.bing.net/th/id/R-C.cbcc58d28a3938d1c825b9cb6bdac212?rik=7PpzBlY2Z4mALA&riu=http%3a%2f%2fwww.itedou.com%2fUploads%2fstar%2f20190521%2f175601.jpg&ehk=rSwcnDKCDFOsKgf6MvBfj%2fU3dN7C2qXtKvGfENDdsWw%3d&risl=&pid=ImgRaw&r=0" alt="用户头像" />
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
// 导入Vue的响应式API
import { ref } from 'vue'

// 搜索查询的响应式数据 - 用于双向绑定搜索框
// ref() 是Vue 3的响应式API，用于创建响应式的基本数据类型
const searchQuery = ref('')
</script>

<style scoped>
/* scoped样式 - 只作用于当前组件，不会影响其他组件 */

/* 头部导航栏样式 */
.header {
  position: fixed;        /* 固定定位 */
  top: 0;                 /* 距离顶部0像素 */
  left: 0;                /* 距离左边0像素 */
  right: 0;               /* 距离右边0像素 */
  background: white;      /* 背景色为白色 */
  border-bottom: 1px solid #e8e8e8; /* 底部边框，颜色为浅灰色 */
  z-index: 1000;         /* 层级，确保在其他元素之上 */
  height: 60px;           /* 固定高度60像素 */
}

/* 头部容器样式 - 控制内容布局和最大宽度 */
.header-container {
  display: flex;          /* 使用flex布局，子元素水平排列 */
  align-items: center;    /* 垂直居中对齐 */
  justify-content: space-between; /* 两端对齐，Logo在左，操作区在右 */
  max-width: 1400px;      /* 最大宽度，防止在大屏幕上过度拉伸 */
  margin: 0 auto;         /* 水平居中 */
  padding: 0 20px;        /* 左右内边距 */
  height: 100%;           /* 高度占满父容器 */
}

/* Logo区域样式 */
.logo {
  display: flex;         /* 使用flex布局 */
  align-items: center;    /* 垂直居中对齐 */
  justify-content: flex-start; /* 左对齐 */
}

/* Logo图片样式 */
.logo-image {
  height: 35px;           /* 高度35像素 */
  width: auto;            /* 宽度自适应，保持比例 */
  object-fit: contain;    /* 保持图片比例，完整显示 */
  transition: all 0.3s ease; /* 过渡动画，所有属性变化0.3秒 */
  cursor: pointer;        /* 鼠标指针样式为手型 */
}

/* Logo悬停效果 - 鼠标悬停时的样式 */
.logo-image:hover {
  transform: scale(1.05); /* 悬停时放大1.05倍 */
}

/* 搜索容器样式 */
.search-container {
  flex: 1;                /* 占据剩余空间 */
  max-width: 400px;       /* 最大宽度400像素 */
  margin: 0 60px 0 40px;  /* 左右外边距，与Logo和操作区保持距离 */
}

/* 搜索框样式 */
.search-box {
  position: relative;     /* 相对定位，为内部元素提供定位参考 */
  display: flex;          /* 使用flex布局 */
  align-items: center;    /* 垂直居中对齐 */
  background: #f0f0f0;    /* 背景色为浅灰色 */
  border-radius: 20px;    /* 圆角20像素，形成胶囊形状 */
  padding: 8px 16px;      /* 内边距：上下8像素，左右16像素 */
}

/* 搜索图标样式 */
.search-icon {
  width: 16px;            /* 宽度16像素 */
  height: 16px;           /* 高度16像素 */
  object-fit: contain;    /* 保持比例 */
  margin-right: 8px;      /* 右边距8像素 */
}

/* 搜索输入框样式 */
.search-input {
  border: none;            /* 无边框 */
  background: transparent; /* 透明背景 */
  outline: none;           /* 无轮廓，移除焦点时的边框 */
  flex: 1;                /* 占据剩余空间 */
  font-size: 14px;        /* 字体大小14像素 */
  color: #333;             /* 字体颜色为深灰色 */
}

/* 搜索框占位符样式 */
.search-input::placeholder {
  color: #999;             /* 占位符颜色为浅灰色 */
}

/* 头部操作区域样式 */
.header-actions {
  display: flex;          /* 使用flex布局 */
  align-items: center;    /* 垂直居中对齐 */
  gap: 16px;              /* 子元素间距16像素 */
}

/* 操作按钮样式 */
.action-btn {
  background: none;       /* 无背景 */
  border: none;           /* 无边框 */
  color: #666;            /* 字体颜色为灰色 */
  font-size: 14px;        /* 字体大小14像素 */
  cursor: pointer;        /* 鼠标指针样式为手型 */
  padding: 8px 12px;      /* 内边距：上下8像素，左右12像素 */
  border-radius: 4px;     /* 圆角4像素 */
  transition: background-color 0.2s; /* 背景色过渡动画0.2秒 */
}

/* 操作按钮悬停效果 */
.action-btn:hover {
  background: #f5f5f5;   /* 悬停时背景色为浅灰色 */
}

/* 用户头像样式 */
.user-avatar img {
  width: 32px;            /* 宽度32像素 */
  height: 32px;           /* 高度32像素 */
  border-radius: 50%;     /* 圆形，50%的圆角 */
  object-fit: cover;      /* 覆盖整个区域，保持比例 */
}
</style>